<template>
  <div class="sell-detail clearfix">
    <div class="order-pre-top clearfix">
      <div class="preview-block">
        <el-card class="order-waiting-num" shadow="hover">
          <div slot="header" class="clearfix">
            <span>今日总览</span>
          </div>
          <div class="order-num">
            <div class="order-num-prev order-prev-left">
              <p>2</p>
              <span>订单数</span>
            </div>
            <div class="order-num-prev order-prev-right">
              <p>¥126</p>
              <span>目前营业额</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="preview-block">
        <el-card class="order-all" shadow="hover">
          <div slot="header" class="clearfix">
            <span>订单总览</span>
          </div>
          <div class="order-num">
            <div class="order-num-prev order-prev-left">
              <p>2</p>
              <span>总订单数</span>
            </div>
            <div class="order-num-prev order-prev-right">
              <p>¥265</p>
              <span>总营业额</span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="sell-all-pre">
      <el-card class="box-card">
        <div slot="header" class="clearfix selector-type">
          <span>商品销售总览</span>
        </div>
        <div class="selector clearfix">
          <div class="selector-type">
            <el-select v-model="searchIndex" @change="changeSelect">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="selector-con">
            <div v-if="searchIndex == 'time'" class="date-picker">
              <el-date-picker
                v-model="pickerOptions.date"
                type="daterange"
                align="center"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :change="doSearch('date')"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <div v-else-if="searchIndex == 'goods'" class="searchByGoodsName">
              <el-input v-model="searchGoodsName" placeholder="请输入要查询的商品名"></el-input>
              <el-button @click="doSearch('goodsName')" type="primary" icon="el-icon-search">搜索</el-button>
            </div>
            <div v-else class="searchByPhone">
              <el-input v-model="searchPhone" type="tel" placeholder="请输入要查询的配送员手机号"></el-input>
              <el-button @click="doSearch('phone')" type="primary" icon="el-icon-search">搜索</el-button>
            </div>
          </div>
        </div>
        <div class="sell-statistics clearfix">
          <p class="searchTips">总计记录如下:</p>
          <div class="order-left">
            <p>2018</p>
            <span>订单数</span>
          </div>
          <div class="order-right">
            <p>¥2018</p>
            <span>营业额</span>
          </div>
          <p class="searchTips">订单记录如下:</p>
          <div class="showOrder">
            <el-collapse accordion>
              <el-collapse-item>
                <template slot="title">
                  <div class="order-brief">
                    <div class="order-detail-item order-top">
                      <p class="order-num">
                        <i class=" xq-icon icon-chongzhidingdanhao"></i>
                        <span class="order-number">订单号: 2018715142519</span>
                        <span class="order-complete-time">订单完成时间: 2018年7月15日22:27:40</span>
                      </p>
                      <p class="order-status"><i class=" xq-icon icon-wancheng"></i>订单已完成</p>
                      <p class="order-sum-price"><i class=" xq-icon icon-jiage"></i>总价: ¥46</p>
                    </div>
                    <div class="order-detail-item order-buttom">
                      <p class="order-dish">商品: 叉烧饭*1 + 王老吉*2</p>
                      <p class="order-extra">商品备注: 多加辣多加辣多加辣</p>
                    </div>
                  </div>
                </template>
                <div class="order-detail">
                  <div class="deliver-info clearfix">
                    <div class="customerInfo">
                      <p class="customerName"><i class="xq-icon icon-lvzhou_gukehuizong"></i>顾客: 王先生</p>
                      <p><i class="xq-icon icon-shouji1"></i>联系电话: 13800138000</p>
                      <p><i class=" xq-icon icon-dizhi01"></i>送货地址: 仲恺农业工程学院7栋宿舍门口</p>
                      <p><i class=" xq-icon icon-daodashijian"></i>要求送达时间: 尽快送达</p>
                    </div>
                    <div class="delivermanInfo">
                      <p class="deliverymanName"><i class=" xq-icon icon-peisong"></i>配送员: 刘女士</p>
                      <p><i class=" xq-icon icon-shouji"></i>联系电话: 13800138000</p>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  <div class="order-brief">
                    <div class="order-detail-item order-top">
                      <p class="order-num">
                        <i class=" xq-icon icon-chongzhidingdanhao"></i>
                        <span class="order-number">订单号: 2018715142519</span>
                        <span class="order-complete-time">订单完成时间: 2018年7月15日22:27:40</span>
                      </p>
                      <p class="order-status"><i class=" xq-icon icon-wancheng"></i>订单已完成</p>
                      <p class="order-sum-price"><i class=" xq-icon icon-jiage"></i>总价: ¥46</p>
                    </div>
                    <div class="order-detail-item order-buttom">
                      <p class="order-dish">商品: 叉烧饭*1 + 王老吉*2</p>
                      <p class="order-extra">商品备注: 多加辣多加辣多加辣</p>
                    </div>
                  </div>
                </template>
                <div class="order-detail">
                  <div class="deliver-info clearfix">
                    <div class="customerInfo">
                      <p class="customerName"><i class="xq-icon icon-lvzhou_gukehuizong"></i>顾客: 王先生</p>
                      <p><i class="xq-icon icon-shouji1"></i>联系电话: 13800138000</p>
                      <p><i class=" xq-icon icon-dizhi01"></i>送货地址: 仲恺农业工程学院7栋宿舍门口</p>
                      <p><i class=" xq-icon icon-daodashijian"></i>要求送达时间: 尽快送达</p>
                    </div>
                    <div class="delivermanInfo">
                      <p class="deliverymanName"><i class=" xq-icon icon-peisong"></i>配送员: 刘女士</p>
                      <p><i class=" xq-icon icon-shouji"></i>联系电话: 13800138000</p>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  <div class="order-brief">
                    <div class="order-detail-item order-top">
                      <p class="order-num">
                        <i class=" xq-icon icon-chongzhidingdanhao"></i>
                        <span class="order-number">订单号: 2018715142519</span>
                        <span class="order-complete-time">订单完成时间: 2018年7月15日22:27:40</span>
                      </p>
                      <p class="order-status"><i class=" xq-icon icon-wancheng"></i>订单已完成</p>
                      <p class="order-sum-price"><i class=" xq-icon icon-jiage"></i>总价: ¥46</p>
                    </div>
                    <div class="order-detail-item order-buttom">
                      <p class="order-dish">商品: 叉烧饭*1 + 王老吉*2</p>
                      <p class="order-extra">商品备注: 多加辣多加辣多加辣</p>
                    </div>
                  </div>
                </template>
                <div class="order-detail">
                  <div class="deliver-info clearfix">
                    <div class="customerInfo">
                      <p class="customerName"><i class="xq-icon icon-lvzhou_gukehuizong"></i>顾客: 王先生</p>
                      <p><i class="xq-icon icon-shouji1"></i>联系电话: 13800138000</p>
                      <p><i class=" xq-icon icon-dizhi01"></i>送货地址: 仲恺农业工程学院7栋宿舍门口</p>
                      <p><i class=" xq-icon icon-daodashijian"></i>要求送达时间: 尽快送达</p>
                    </div>
                    <div class="delivermanInfo">
                      <p class="deliverymanName"><i class=" xq-icon icon-peisong"></i>配送员: 刘女士</p>
                      <p><i class=" xq-icon icon-shouji"></i>联系电话: 13800138000</p>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  <div class="order-brief">
                    <div class="order-detail-item order-top">
                      <p class="order-num">
                        <i class=" xq-icon icon-chongzhidingdanhao"></i>
                        <span class="order-number">订单号: 2018715142519</span>
                        <span class="order-complete-time">订单完成时间: 2018年7月15日22:27:40</span>
                      </p>
                      <p class="order-status"><i class=" xq-icon icon-wancheng"></i>订单已完成</p>
                      <p class="order-sum-price"><i class=" xq-icon icon-jiage"></i>总价: ¥46</p>
                    </div>
                    <div class="order-detail-item order-buttom">
                      <p class="order-dish">商品: 叉烧饭*1 + 王老吉*2</p>
                      <p class="order-extra">商品备注: 多加辣多加辣多加辣</p>
                    </div>
                  </div>
                </template>
                <div class="order-detail">
                  <div class="deliver-info clearfix">
                    <div class="customerInfo">
                      <p class="customerName"><i class="xq-icon icon-lvzhou_gukehuizong"></i>顾客: 王先生</p>
                      <p><i class="xq-icon icon-shouji1"></i>联系电话: 13800138000</p>
                      <p><i class=" xq-icon icon-dizhi01"></i>送货地址: 仲恺农业工程学院7栋宿舍门口</p>
                      <p><i class=" xq-icon icon-daodashijian"></i>要求送达时间: 尽快送达</p>
                    </div>
                    <div class="delivermanInfo">
                      <p class="deliverymanName"><i class=" xq-icon icon-peisong"></i>配送员: 刘女士</p>
                      <p><i class=" xq-icon icon-shouji"></i>联系电话: 13800138000</p>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SellDetail',
  data () {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }],
        date: ''
      },
      options: [{
        value: 'time',
        label: '按时间段查询'
      }, {
        value: 'phone',
        label: '按配送员手机号码查询'
      }, {
        value: 'goods',
        label: '按商品信息查询'
      }],
      searchIndex: 'time',
      searchGoodsName: '',
      searchPhone: ''
    }
  },
  methods: {
    changeSelect (label) {
      console.log(label)
    },
    doSearch (type) {
      console.log(type)
    }
  }
}
</script>

<style lang="stylus">
  .sell-detail
    .el-collapse-item__header
      height: auto
      line-height: 32px
    .el-collapse-item__arrow
      display none
    .el-collapse-item__content
      border-top: 1px solid #ccc
      padding 10px 0 8px 0
</style>

<style lang="stylus" scoped>
  @import "../assets/css/base.styl"
  .sell-detail
    width: $width
    margin: 0 auto
    .order-pre-top
      height: 160px
      padding-left 160px
      .preview-block
        width: 50%
        float: left
        padding: 10px 0 10px 10px
        box-sizing border-box
        .order-num
          padding: 0 50px 60px
          .order-num-prev
            float: left
            cursor: pointer
            p
              text-align: center
              font-size 32px
              font-weight: 600;
              font-family Consolas
              color: #F56C6C
            span
              color: #666
              font-size 14px
          .order-prev-left
            float: left
          .order-prev-right
            float: right
    .sell-all-pre
      padding-left 170px
      .selector
        .selector-type
          float: left
          margin 0 20px 0 50px
        .selector-con
          float: left
          .el-input
            width: 220px
      .sell-statistics
        .order-left, .order-right
          width: 50%
          box-sizing: border-box
          float: left
          text-align: center
          p
            font-size 26px
            color: #F56C6C
            margin 20px 0 10px 0
            font-weight 700
          span
            color: #666
        .searchTips
          margin 30px 0 20px
          color: #aaa
          text-align: center
        .showOrder
          width: 100%
        .el-collapse
          font-size 14px
          background-color: #f5f5f6
          .el-collapse-item
            padding 10px 15px
            border-radius: 6px
            background-color: #fff
            margin-bottom: 10px
            .order-brief
              color: #999
              .order-buttom
                padding-bottom 8px
                p
                  display inline-block
                .order-extra
                  margin-left 12px
              .order-top
                position: relative
                padding-top 8px
                .order-complete-time
                  margin-left 80px
                .order-status
                  position: absolute
                  right: 0
                  top: 8px
                .order-sum-price
                  float: right
                .el-button
                  position: absolute
                  right: 20px
                  top: 20px
                .cancel-btn
                  right: 120px
            .order-detail
              .customerInfo
                float: left
              .delivermanInfo
                padding-right 10px
                margin-right 20px
                float: right
</style>
